import React, { Component } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  componentWillMount() {
    this.timer = setInterval(() => this.setState({ date: new Date() }), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <p>现在时间是：</p>
        <p>{this.state.date.toLocaleTimeString()}</p>
      </div>
    );
  }
}

class Index extends Component {
  constructor() {
    super();
    this.state = {
      isShow: false
    };
  }
  handleShow = () => {
    this.setState({
      isShow: !this.state.isShow
    });
  };
  render() {
    return (
      <div>
        {this.state.isShow ? <Clock /> : null}
        <button onClick={this.handleShow}>显示/隐藏闹钟</button>
      </div>
    );
  }
}

export default Index;
